<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="model.*"
		import="java.util.ArrayList;"%>

<html>
<head>

<title>Create Feedback</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link href="css/style/style.css" rel="stylesheet" type="text/css"/>
<link href="css/sample.css" rel="stylesheet" type="text/css"/>
 
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
	

<link rel="stylesheet" type="text/css" href="css/themes/base/jquery-ui.css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/modernizr.custom.20277.js" type="text/javascript"></script>


<script>
	$(function() {		
		/**
		load auto suggest name of the employees
		*/
		
	    var json = null;
	    $.ajax({
	        'async': false,
	        'global': false,
	        'url': 'employeeData.do',
	        'dataType': "json",
	        'success': function (data) {debugger;
	        	json = data;
	        }
	    });
		
		
		$( "#combo" ).autocomplete({
			delay: 0,
            source: json,
            select: function(event, ui) {
                $('#search').val(ui.item.label);
                $('#searchval').val(ui.item.value);
                return ui.item.value;
            }
		});
		
		//==============================================================
		/**
		load two integrated combobox 
		*/
		
    	var js = null;
	    $.ajax({
	        'async': false,
	        'global': false,
	        'url': 'sectionData.do',
	        'dataType': "json",
	        'success': function (data) {debugger;
	        	js = data;
	        }
	    });
    	
	    $("select#departingfrom").ready(function(){
	  		var a = [];
	  		for (var key in js) {
		    	if(key == getValue()) {
		       		a = js[key];
		       	}
		    }
	  		
	  		var options = '';
			for(var e = 0; e < a.length; e++) {
				options += '<option value=' + a[e].id + '>' + a[e].name + '</option>';
			}
	     	$("select#arrivingto").html(options);
	    	
	  	});
	    
	  	$("select#departingfrom").change(function(){
	  		var a = [];
	  		for (var key in js) {
		    	if(key == getValue()) {
		       		a = js[key];
		       	}
		    }
	  		
	  		var options = '';
			for(var e = 0; e < a.length; e++) {
				options += '<option value=' + a[e].id + '>' + a[e].name + '</option>';
			}
	     	$("select#arrivingto").html(options);
	    	
	  	});
	  	
	  	
	  	//==========================================================================
		/**
		*/
	  	$("select#user").change(function(){
	  		var a = getEmploy();
	  		if(a == 1) {
	  			$("#hide").hide();
	  			$("#hide1").hide();
	  		} else {
	  			$("#hide").show();
	  			$("#hide1").show();
	  		}
	    	
	  	});
	  	
	  	$("select#user").ready(function(){
	  		var a = getEmploy();
	  		if(a == 1) {
	  			$("#hide").hide();
	  			$("#hide1").hide();
	  		} else {
	  			$("#hide").show();
	  			$("#hide1").show();
	  		}
	    	
	  	});
		
	});
	
	
	
	
	// --------------------------------------------------------------
	function getValue() {
		var sel = document.getElementById('departingfrom');
		var i = sel.options[sel.selectedIndex].value;
		return i;
	}
	
	function getEmploy() {
		var sel = document.getElementById('user');
		var i = sel.options[sel.selectedIndex].value;
		return i;
	}
</script>

<script type="text/javascript" src="js/nicEdit-latest.js"></script> 
<script type="text/javascript">
    bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>

</head>

</head>
<body>
	
	<div id="container">
		
		<div id="header">
			<img src="css/images/logo.jpg" alt="" id="logo">
			<h1 id="logo-text">Create Feedback</h1>
		</div>
		<div id="nav">
			<ul>
				<li><a href="gui.jsp">Home</a></li>
				<li><a href="#">Provide Feedback</a></li>
				<li><a href="viewFeed.jsp">Show Feedback</a></li>
				<%
			if (null == session.getAttribute("person")) {
		%>
				<li><a href="#">Self Profile</a></li>
		<%
			} else {
		%>
				<li><a href="profileAcion.do">Self Profile</a></li>
		<%
			}
		%>
				<li><a href="#">About</a></li>
				<li style="border-right: medium none;"><a href="#">Links</a></li>
			</ul>
		</div>
		<div id="site-content">
			
			<div id="col-left">
			<form method="post" action="feedbackAction.do">
				<table border="0" align="center" width="500">
					<tr>
						<td><p>Provide feedback for</p></td>
						<td width="240">
							<p>For Date</p>
						</td>
					</tr>
					<tr>
						<td>
							<select id="user" name="user">
							  <option selected value="1">My self</option>
							  <option value="2">Other colleague</option>
							</select>
						</td>
						<td><input id="datepicker" name="date_picker" type="date" value="2013-02-28"/></td>
					</tr>
					<tr><td>&nbsp;</td><td></td></tr>
					
					<tr id = "hide">
						<td><p>Employee</p></td>
						<td></td>
					</tr>
					
					<tr id = "hide1">
						<td>
							<div class="ui-widget" >
							    <input id="combo" name="search" />
					        </div>
						</td>
						<td>
						<div class="ui-widget" >
							    <input type="text" readonly id="search" />
					        </div>
						</td>
					</tr>
					
					<tr><td>&nbsp;</td><td></td></tr>
					<tr>
						<td><p>FB Category</p></td>
						<td>
							<p>Section</p>
						</td>
					</tr>
					
					<tr>
						<td>
							<select id="departingfrom">
							  <option selected="selected" value="1">KMS Core Value</option>
							  <option value="2">Overall Performance</option>
							</select>

						</td>
						<td>
							<select name="section"id="arrivingto">
							  <option selected="selected"></option>
							</select>
						</td>
					</tr>
					<tr><td>&nbsp;</td><td></td></tr>
					
					<tr>
						<td colspan="2">
							<p>Content of feedback</p>
						</td>
					</tr>
					<tr>
						<td colspan="2" >
							<textarea name="content" style="width: 100%; height: 200px;">>
								HTML content default in textarea
							</textarea>
						</td>
					</tr>
					
					<tr><td>&nbsp;</td><td></td></tr>
					<tr>
						<td></td>
						
						<td align="center"><input type="submit"/></td>
					</tr>
				</table>
			</form>
			
			</div>
			
			
			<div id="col-right">
				<div style="padding: 30px 10px 10px;">
					<%
						//Employee user = (Employee) session.getAttribute("user");
						if (null == session.getAttribute("person")) {
							String err = (String) request.getAttribute("error");
							if (null != err) {
					%>
							<p style="color: Red"><%=err%></p>
					<%
						request.removeAttribute("error");
							}
					%>
					<form method="post" action="Login.do">
						<h2 class="h-text-2">Login</h2>
						<h3 class="h-text-3">Username</h3>
						<p class="text-2">
							<input type="text" name="username" placeholder="Enter username" size="25">
						</p>

						<h3 class="h-text-3">Password</h3>
						<p class="text-2">
							<input type="password" name="password" size="25">
						</p>
						
						<p><input type="submit" value="submit"></p>
					</form>
				</div>
					<%
						} else {
					%>
							<div align="right"><a href="Login.do?mes=out">Logout</a></div>
							<h4 class="h-text-2">Welcome </h4>
							<h2>${person.username}</h2>
				</div>
				<div>&nbsp;</div>
				<div style="padding: 5px 10px;">
					<h3 class="h-text-2">Contact Info</h3>
				</div>
				<div
					style="padding: 5px 10px 15px; background: rgb(216, 214, 215) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">
					<p class="text-2">
						Fullname:  ${person.fullname}<br> <br> 
						Title:  ${person.title.titleName}<br> <br> 
						Email:  ${person.email}<br> <br>
						Fax:  000.000.0000<br> <br> Phone: 000.000.0000/<br>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						000.000.0000
					</p>
				</div>
				<br/>
				
					<%
						}
					%>
			</div>
		</div>
		<div id="footer">
			<p>
				@ Copyright 2010. Designed by <a target="_blank"
					href="http://www.htmltemplates.net/">HTML Templates</a>
			</p>
			<ul class="footer-nav">
				<li><a href="#">Home</a></li>
				<li><a href="#">About us</a></li>
				<li><a href="#">Recent articles</a></li>
				<li><a href="#">Email</a></li>
				<li><a href="#">Resources</a></li>
				<li><a href="#">Links</a></li>
			</ul>
		</div>
	</div>
</body>
</html>